<template>
    <!-- 物资管理-收料汇总分析 -->
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <div class="list">
                        <div class="item">
                            <span>选择日期:</span>
                            <DatePicker type="date" placeholder="请选择开始时间" style="width: 200px" v-model="startTime" :options="options" :clearable="false"></DatePicker>
                            <DatePicker type="date" placeholder="请选择结束时间" style="width: 200px;margin-left:20px;" v-model="endTime" :options="options" :clearable="false"></DatePicker>
                        </div>
                    </div>
                    <div class="list">
                        <span>单据来源:</span>
                        <CheckboxGroup v-model="sourceType">
                            <Checkbox v-for="(val,index) in sourceList" :key="index" :label="val.id">
                                <span>{{val.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                    <div class="list">
                        <span>收料类型:</span>
                        <CheckboxGroup v-model="recvSendList">
                            <Checkbox v-for="(val,index) in recvSendTypeList" :key="index" :label="val.id">
                                <span>{{val.name}}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                    <div class="list list1">
                        <div class="item1">
                            <span>材料类别:</span>
                            <Select v-model="matTypeName" filterable style="width:200px" placeholder="请选择材料类别名称" @on-change="getmatList">
                                <Option v-for="item in matAllTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>材料明细:</span>
                            <Select v-model="matName" filterable style="width:200px" placeholder="请选择材料明细名称">
                                <Option v-for="item in matList" :value="item.id" :key="item.id" style="width:180px">{{item.name}}{{item.spec}}{{item.model}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <div class="item1">
                            <span>发料单位:</span>
                            <Select v-model="receiveSupplierName" filterable style="width:200px" placeholder="请选择发料单位名称">
                                <Option v-for="item in corpList" :value="item.id" :key="item.id">{{item.name}}</Option>
                            </Select>
                            <input type="password" autocomplete="new-password" style="display: none" />
                        </div>
                        <input type="text" class="intBox" style="display:none" />
                        <div class="item1">
                            <el-button type="primary" @click="searchAll" size="small" plain>搜索</el-button>
                            <el-button type="info" @click="clear" style="margin-left:20px;" size="small" plain>重置</el-button>
                            <el-button :type="!btnList.includes('fmam/receive/exp')?'info':'primary'" style="margin-left:20px;" size="small" plain @click="downLoad" :disabled="!btnList.includes('fmam/receive/exp')">导出</el-button>
                        </div>
                    </div>
                </div>
                <div class="msg_data">
                    <div class="item">
                        <div>
                            <p>
                                <span>运单重量(吨):</span>
                                <span>{{deliveryWeight}}</span>
                            </p>
                            <p>
                                <span>实际重量(吨):</span>
                                <span>{{actualWeight}}</span>
                            </p>
                            <p>
                                <span>扣量(吨):</span>
                                <span>{{deductAmount}}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="search" style="border:none;margin-bottom: 10px;">
                    <el-button style="margin-right:20px;" :type="flag?'primary':'info'" @click="getCategoryType(0)" size="small" plain>按材料类别</el-button>
                    <el-button :type="!flag?'primary':'info'" @click="getCategoryType(1)" size="small" plain>按材料明细</el-button>
                </div>
                <div class="table" v-if="!flag">
                    <el-table :data="matlist" @row-click="getMatDetails">
                        <el-table-column label="材料明细">
                            <template slot-scope="scope">
                                <p>{{scope.row.matName}}</p>
                                <span>规格/型号:{{scope.row.spec}}{{scope.row.model}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="unitName" label="单位"></el-table-column>
                        <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                        <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                        <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                        <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                        <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                        <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                        <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                        <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                    </el-table>
                </div>
                <div v-if="flag">
                    <div class="echarts">
                        <div id="mattype" :style="{ height: '100%'}"></div>
                    </div>
                    <div class="table">
                        <el-table :data="matTypeList" row-key="matTypeId" @row-click="getMat" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                            <el-table-column prop="matTypeName" label="材料类别"></el-table-column>
                            <el-table-column prop="deliveryAmount" label="运单数量"></el-table-column>
                            <el-table-column prop="actualAmount" label="实际数量"></el-table-column>
                            <el-table-column prop="deliveryWeight" label="运单重量(吨)"></el-table-column>
                            <el-table-column prop="actualWeight" label="实际重量(吨)"></el-table-column>
                            <el-table-column prop="amountDiff" label="数量偏差"></el-table-column>
                            <el-table-column prop="weightDiff" label="重量偏差(吨)"></el-table-column>
                            <el-table-column prop="amountDiffPercent" label="数量偏差率(%)"></el-table-column>
                            <el-table-column prop="weightDiffPercent" label="重量偏差率(%)"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { format } from "@/sever/utils.js";
import {
    getAnalysisMat,
    getWeighNoteDetail,
    getAnalysisMatType,
    getAllSupplierList,
    getMatTypeOptionlist,
    getAllMatList,
    getFmamMatExport
} from "@/api/api.js";
export default {
    data() {
        return {
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            deptId: "",
            recvSendTypeList: [
                {
                    id: 101,
                    name: "采购"
                },
                {
                    id: 102,
                    name: "调入"
                },
                {
                    id: 103,
                    name: "甲供"
                },
                {
                    id: 301,
                    name: "直入直出"
                }
            ],
            recvSendList: [101, 102, 103, 301],
            endTime: new Date(),
            startTime: new Date(new Date().valueOf() - 604800000),
            matTypeName: "",
            matName: "",
            receiveSupplierName: "",
            matlist: [],
            matTypeList: [],
            deliveryAmount: "",
            actualAmount: "",
            confirmWeight: "",
            deliveryWeight: "",
            actualWeight: "",
            deductAmount: "",
            flag: true,
            nameList: [],
            deliveryAmountList: [],
            actualAmountList: [],
            confirmWeightList: [],
            sourceList: [
                {
                    id: 0,
                    name: "称重"
                },
                {
                    id: 1,
                    name: "补录"
                },
                {
                    id: 2,
                    name: "移动收料"
                }
            ],
            sourceType: [0, 1, 2],
            corpList: [],
            matAllTypeList: [],
            matList: [],
            matId: "",
            btnList:[],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.recvSendList = [101, 102, 103, 301];
                this.sourceType = [0, 1, 2];
                this.endTime = new Date();
                this.startTime = new Date(new Date().valueOf() - 604800000);
                this.matTypeName = "";
                this.matName = "";
                this.receiveSupplierName = "";
                this.code = "";
                this.getCorpList();
                this.getMatTypeList();
                this.getMatDetailsList();
            }
            if (this.flag) {
                this.getMatTypeAllList();
            } else {
                this.getMatAllList();
            }
        }
    },
    methods: {
        //获取供应商单位
        getCorpList() {
            let params = {
                // pageSize:100000,
                deptId: this.deptId,
                category: 2
            };
            getAllSupplierList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //查询材料类别列表
        getMatTypeList() {
            let params = {
                deptId: this.deptId
            };
            getMatTypeOptionlist(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matAllTypeList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //查询材料明细
        getMatDetailsList() {
            let params = {
                deptId: this.deptId,
                matTypeId: this.matId
            };
            getAllMatList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取材料类别
        getmatList(index) {
            this.matName = "";
            this.matId = index;
            this.getMatDetailsList();
        },
        getCategoryType(type) {
            if (type == 0) {
                this.flag = true;
                this.getMatTypeAllList();
            } else {
                this.flag = false;
                this.getMatAllList();
            }
        },
        getMatAllList() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                recvSendTypeList: this.recvSendList,
                sourceList: this.sourceType,
                matTypeId: this.matTypeName,
                matId: this.matName,
                sendSupplierId: this.receiveSupplierName
            };
            getAnalysisMat(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matlist = res.data.list;
                        this.deliveryAmount = res.data.deliveryAmount;
                        this.actualAmount = res.data.actualAmount;
                        this.confirmWeight = res.data.confirmWeight;
                        this.deliveryWeight = res.data.deliveryWeight;
                        this.actualWeight = res.data.actualWeight;
                        this.deductAmount = res.data.deductAmount;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getMatTypeAllList() {
            this.nameList = [];
            this.deliveryAmountList = [];
            this.actualAmountList = [];
            this.confirmWeightList = [];
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                recvSendTypeList: this.recvSendList,
                sourceList: this.sourceType,
                matTypeId: this.matTypeName,
                matId: this.matName,
                sendSupplierId: this.receiveSupplierName
            };
            getAnalysisMatType(params)
                .then(res => {
                    if (res.code == 200) {
                        this.matTypeList = res.data.matTypeDTOList;
                        this.deliveryAmount = res.data.deliveryAmount;
                        this.actualAmount = res.data.actualAmount;
                        this.confirmWeight = res.data.confirmWeight;
                        this.deliveryWeight = res.data.deliveryWeight;
                        this.actualWeight = res.data.actualWeight;
                        this.deductAmount = res.data.deductAmount;
                        this.matTypeList.forEach(i => {
                            this.nameList.push(i.matTypeName);
                            this.deliveryAmountList.push(i.deliveryAmount);
                            this.actualAmountList.push(i.actualAmount);
                            this.confirmWeightList.push(i.confirmWeight);
                        });
                        this.drawMatType();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getMatDetails(row) {
            let obj = {
                matName: row.matName,
                model: row.model,
                spec: row.spec
            };
            localStorage.setItem("mat_flag", 1);
            localStorage.setItem("mat_obj", JSON.stringify(obj));
            this.$router.push({
                path: "/fmam/receiveDetailes",
                query: {
                    id: row.matId
                }
            });
        },
        searchAll() {
            if (
                new Date(this.startTime).getTime() >
                new Date(this.endTime).getTime()
            ) {
                this.$Modal.warning({
                    title: "错误",
                    content: "结束日期不能小于开始日期"
                });
                return;
            }
            if (this.flag) {
                this.getMatTypeAllList();
            } else {
                this.getMatAllList();
            }
        },
        getMat(row) {
            if (row.children == undefined) {
                let obj = {
                    matName: row.matTypeName,
                    model: row.model,
                    spec: row.spec
                };
                localStorage.setItem("mat_flag", 2);
                localStorage.setItem("mat_obj", JSON.stringify(obj));
                this.$router.push({
                    path: "/fmam/receiveDetailes",
                    query: {
                        id: row.matTypeId
                    }
                });
            }
        },
        clear() {
            this.recvSendList = [101, 102, 103, 301];
            this.sourceType = [0, 1, 2];
            this.endTime = new Date();
            this.startTime = new Date(new Date().valueOf() - 604800000);
            this.matTypeName = "";
            this.matName = "";
            this.receiveSupplierName = "";
            this.code = "";
            if (this.flag) {
                this.getMatTypeAllList();
            } else {
                this.getMatAllList();
            }
        },
        drawMatType() {
            let matType = this.$echarts.init(
                document.getElementById("mattype")
            );
            matType.setOption({
                // data: ["运单数量", "实际数量","确认数量"],
                color: ["#1891FF", "#999", "#2db7f5"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: ""
                    }
                },
                legend: {
                    data: ["运单数量", "实际数量", "确认数量"],
                    x: "center",
                    top: 0
                },
                grid: {
                    top: "30px",
                    left: "14px",
                    right: "14px",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    data: this.nameList,
                    // axisLine: {
                    //   lineStyle: {
                    //     color: "#02C0C0"
                    //   }
                    // },
                    splitLine: {
                        //去除网格线
                        show: true
                    }
                },
                yAxis: {
                    show: true,
                    // axisLine: {
                    //   lineStyle: {
                    //     color: "#02C0C0"
                    //   }
                    // },
                    splitLine: {
                        //去除网格线
                        show: true
                    }
                },
                series: [
                    {
                        name: "运单数量",
                        type: "bar",
                        data: this.deliveryAmountList,
                        barWidth: "20%"
                    },
                    {
                        name: "实际数量",
                        type: "bar",
                        data: this.actualAmountList,
                        barWidth: "20%"
                    },
                    {
                        name: "确认数量",
                        type: "bar",
                        data: this.confirmWeightList,
                        barWidth: "20%"
                    }
                ]
            });
        },
        downLoad() {
            let params = {
                type: 1,
                deptId: this.deptId,
                startTime: format(this.startTime, "YYYY-MM-DD"),
                endTime: format(this.endTime, "YYYY-MM-DD"),
                recvSendTypeList: this.recvSendList,
                sourceList: this.sourceType,
                matTypeId: this.matTypeName,
                matId: this.matName,
                sendSupplierId: this.receiveSupplierName
            };
            getFmamMatExport(params)
                .then(res => {
                    if (res.code == 200) {
                        window.open(res.data.path);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getMatTypeAllList();
        this.getCorpList();
        this.getMatTypeList();
        this.getMatDetailsList();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/base.less";
.echarts {
    height: 400px;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}
</style>
